<!-- 分页组件
props{
    total : 数据总数
    page:当前页
    limit：每页条数
}  
emit['pageChange']   将页数和条数传递给父组件
-->
<template>
    <div class="demo-pagination-block">
            <el-pagination v-model:currentPage="page" v-model:page-size="limit" :page-sizes="[15, 20, 30, 50]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'

//接收父传子的自定义属性
let props = defineProps({
    limit: { type: Number, required: true },
    page: { type: Number, required: true },
    total: { type: Number, required: true },
})

let limit = ref(props.limit)        //每页条数
let page = ref(props.page)          //当前页

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

let pageMax = computed(() => Math.ceil(props.total / limit.value))

let emit = defineEmits<{ (e: 'pageChange', size: TypePage): void }>()
watch([page, limit], () => {
    if (page.value <= pageMax.value) {
        emit('pageChange', { page: page.value, limit: limit.value })
    }
})
</script>
  


<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
  